본문으로 건너뛰기

비동기 프로그래밍

🧑🏻‍💻 동기와 비동기 처리​

✅ 동기(synchronous) 처리​

  • 현재 실행 중인 태스크가 종료될 때까지 다음에 실행될 태스크가 대기하는 방식이다.

    동기처리

  • 장점 : 실행 순서가 보장된다.

  • 단점 : 블로킹(작업 중단) 현상이 발생한다.

✅ 비동기(asynchronous) 처리​

  • 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식이다.비동기처리
function foo() {
    console.log('foo');
}

function bar() {
    console.log('bar');
}

setTimeout(foo, 3 * 1000);
bar();
  • 장점 : 블로킹(작업 중단) 현상이 발생하지 않는다.
  • 단점 : 실행 순서가 보장되지 않는다.

🧑🏻‍💻 JS 엔진과 브라우저의 비동기 동작​

  • JS 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.

  • JS 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다.

  • 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업 중단)이 중단한다.

  • 브라우저는 멀티 스레드 방식으로 동작한다.

  • 비동기 처리에서 소스코드의 평가와 실행을 제외한 모든 처리는 JS 엔진을 구동하는 환경인 브라우저 또는 Node.js가 담당한다.

  • 예를 들어, setTimeout의 콜백 함수의 평가와 실행은 JS 엔진이 담당하지만 호출 스케줄링을 위한 타이머 설정과 콜백 함수의 등록은 브라우저 또는 Node.js가 담당한다.

  • 이를 위해 JS 엔진(힙, 콜 스택)과 브라우저(태스크 큐, 이벤트 루프, Web API)가 협력하여 비동기 함수를 실행한다.

비동기처리

✅ JS 엔진의 콜 스택과 힙​

  • 콜 스택 : 실행 컨텍스트가 추가되고 제거되는 단 하나의 스택 자료구조이다.

  • 힙 : 객체가 저장되는 메모리 공간이다.

✅ 태스크 큐와 이벤트 루프​

  • 태스크 큐 : 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역으로, 마이크로 태스크큐(Event Queue)와 매크로 태스크큐(Job Queue)로 나뉘어진다.

  • 이벤트 루프 : 콜 스택이 비어 있고 태스크 큐에 대기 중인 함수가 있다면, FIFO으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다.

  • 멀티 스레드의 구동 환경이 싱글 스레드인 JS 엔진과 연동하기 위해 사용되는 장치들 이다.

  • 즉 JS의 동시성 (concurrency)을 지원하는 장치이다.

✅ 아래 예시의 동작 과정은?​

function foo() {
    console.log('foo');
}

function bar() {
    console.log('bar');
}

setTimeout(foo, 0);
bar();

// 답: 모던 JS Deep Dive - 848p

참고 자료